<!--  线 + 柱混合图 -->
<template>
  <div :id="id" :class="className" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();

// 在组件中访问 Vuex store 中的数组
const resultArray = store.state.resultArray;
console.log("resultArray",resultArray);

const parmsList = ref(store.state.parmsList);
console.log("parmsList.value",parmsList.value);
debugger;

const train_size = parmsList.value.train_size * 100;
console.log("train_size",train_size);

const value1 = ref(false);

const myChart = ref<echarts.ECharts | null>(null);
const selectedData = ref<number[]>([]);

// 从数组中获取百分之 x 的数据（与train_size相关）
function getPercentageOfArray(arr, percentage) {
  if (!Array.isArray(arr) || percentage < 0 || percentage > 100) {
    // 处理无效输入
    return null;
  }

  const totalCount = arr.length; //获取数组长度
  const countToExtract = Math.ceil((percentage / 100) * totalCount); //

  // 返回截取后的数组(使用负索引表示从数组末尾开始)
  return arr.slice(0, countToExtract);
}

//获取原始数据数组最后一列
const lastColumn = resultArray[Object.keys(resultArray).pop()]; //原始y数据：选择的最后一列
console.log(lastColumn);

// 获取最后一列的后百分之X
const rawyaxis = getPercentageOfArray(lastColumn, train_size);
console.log(rawyaxis);
//获取到原始数据和预测数据后，遍历得到source格式
const ResultSource = rawyaxis.map((value, index) => [index + 1, value]);
console.log(ResultSource);

const props = defineProps({
  id: {
    type: String,
    default: "zoomChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

// const source = ref([
//   ["Day", "Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
//   ["Mon", 120, 220, 150, 320, 820],
//   ["Tue", 132, 182, 232, 332, 932],
//   ["Wed", 101, 191, 201, 301, 901],
//   ["Thu", 134, 234, 154, 334, 934],
//   ["Fri", 90, 290, 190, 390, 1290],
//   ["Sat", 210, 310, 410, 320, 1320],
//   ["MonMon", 180, 300, 390, 350, 1400],
//   ["TueTue", 170, 250, 350, 370, 1300],
//   ["WedWed", 100, 210, 380, 390, 1320],
//   ["ThuThu", 130, 200, 300, 250, 1350],
//   ["FriFri", 170, 150, 290, 260, 1470],
//   ["SatSat", 230, 180, 250, 200, 1200],
// ]);

let source = ref(ResultSource);

const options = {
  dataset: {
    source: source.value,
  },
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "7%",
    right: "8%",
    bottom: "13%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
  },
  yAxis: {
    type: "value",
  },
  dataZoom: [
    {
      type: "slider",
      xAxisIndex: 0,
      filterMode: "none",
    },
    {
      type: "inside",
      xAxisIndex: 0,
      filterMode: "none",
    },
  ],
  series: [{ type: "line" }],
};

const chart = ref<any>("");
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>
